<template>
  <div class="new-list">
    <div class="date">{{createdDate}}</div>
    <div class="detail">
      <div class="detail-list">
        <div class="detail-time">{{createdTime}}</div>
        <div class="detail-box">
          <div class="detail-top">
            <div class="detail-name">消耗{{item.flowers}}朵鲜花</div>
          </div>
          <div class="detail-text">兑换{{item.data.name}}<i class="coupon-btn" v-if="item.data.coupon" @click="showCoupon(item.data.coupon)"></i></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  props: {
    item: {
      type: Object,
      default: {},
    },
  },
  data () {
    return {
    }
  },
  computed: {
    createdTime () {
      let output
      const time = this.item.created
      if (time) {
        output = this.timeFilter(time)
      }
      return output
    },
    createdDate () {
      let output
      const time = this.item.created
      if (time) {
        output = this.dateFilter(time)
      }
      return output
    },
  },
  methods: {
    showCoupon (coupon) {
      wx.showModal({
        title: '淘口令',
        content: coupon,
        confirmText: '一键复制',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            wx.setClipboardData({
              data: coupon,
              success: (res) => {
                wx.showToast({
                  title: '复制成功'
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.new-list {
  .date {
    color: #9f643e;
    font-size: 25rpx;
    font-weight: bold;
  }
  .detail {
    margin: 15rpx 0 15rpx 30rpx;
    border-left: 5rpx solid #a56f4b;
    &-list {
      margin-left: 55rpx;
      padding-bottom: 15rpx;
      .detail-time {
        color: #9f643e;
        font-size: 17rpx;
        text-align: right;
        padding-right: 34rpx;
        margin-bottom: 8rpx;
      }
      .detail-box {
        background-color: #ecd7be;
        border-radius: 10rpx;
        padding: 12rpx 34rpx 12rpx 22rpx;
        .detail-top {
          display: flex;
          justify-content: space-between;
          font-size: 21rpx;
          color: #9f643e;
        }
        .detail-text {
          display: flex;
          color: #9f643e;
          font-size: 19rpx;
        }
        .coupon-btn {
          display: block;
          width: 83rpx;
          height: 27rpx;
          background: url("../../static/images/exchange/btn3.png") no-repeat center center;
          background-size: contain;
          margin-left: 5rpx;
        }
      }
    }
  }
}
</style>
